export default {
  props: {
    name: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: 'icon'
    },
    size: Number,
    width: Number,
    height: Number,
    inText:String
  },
  computed: {
    fullName() {
      const { name, className } = this
      const prefix = `${className}-`
      return name.indexOf(prefix) === 0 ? name : prefix + name
    },
    style() {
      const { size, width, height } = this
      return {
        width: width ? width + 'px' : (size ? size + 'px' : ''),
        height: height ? height + 'px' : (size ? size + 'px' : '')
      }
    },
    textX(){
      const { size, width, height } = this
      return width ? parseInt(width)/2 : (size ? parseInt(size)/2 : '')
    },
    textY(){
      const { size, width, height } = this
      return width ? parseInt(width)/2 : (size ? parseInt(size)/2 : '')
    }
  },
  render(h) {
    const { className, fullName, style,inText,textX,textY } = this
    return (
      <svg class={`icon ${className}`} style={style}>
        <use href={`#${fullName}`} />
        <text fill="#000" x={textX} y={textY} text-anchor="middle" dominant-baseline="middle">{inText}</text>
      </svg>
    )
  },
  methods:{

  }
}
